<template>
  <div class="container">
    <div class="login-box">
      <h2>注册</h2>
      <form @submit="register">
        <input
          type="text"
          v-model="account"
          name="account"
          placeholder="account"
          required
        /><br />
        <input
          type="password"
          v-model="password1"
          name="password1"
          placeholder="Password"
          required
        /><br />
        <input
          type="password"
          v-model="password2"
          name="password2"
          placeholder="Confirm Password"
          required
        />

        <input type="submit" value="注册" />
        <p></p>
        <button @click="goToLogin">登录</button>
      </form>
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();

let account = ref("");
let password1 = ref("");
let password2 = ref("");
const errorMessage = ref("");

const register = () => {
  if (account.value.length > 15) {
    alert("账号长度不能超过15个字符");
  } else if (password1.value.length > 8 || password2.value.length > 8) {
    alert("密码长度不能超过8个字符");
  } else if (password1.value !== password2.value) {
    alert("两次输入的密码不一致");
  } else if (
    account.value == "" ||
    password1.value == "" ||
    password2.value == ""
  ) {
    alert("不能为空");
  } else {
    localStorage.setItem("account", account.value);
    localStorage.setItem("password", password1.value);
    alert("注册成功！");
  }
};

const goToLogin = () => {
  router.push("/login");
};

const validateForm = () => {
  return true;
};
</script>
<style scoped>
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  text-align: center;
  margin-top: 50px;
  display: flex;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.login-box {
  width: 300px;
  background-color: #fff;
  padding: 20px;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

input[type="text"],
input[type="password"] {
  width: calc(100% - 20px);
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-sizing: border-box;
}

input[type="submit"],
button {
  background-color: #4da8e9;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  width: 250px;
  margin-top: 10px;
}

input[type="submit"]:hover,
button:hover {
  background-color: #4da8e9;
}

p {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}
</style>